<template>
  <div class="demo-title">index-bar/demo1</div>
  <div class="demo">
    <IndexBar :index-list="datas" @click-item="clickItem" @click-index="clickIndex" />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import IndexBar, { type IndexBarItemType } from '@sscd-mobile/index-bar'
  const datas = ref<IndexBarItemType[]>([
    {
      title: 'A',
      list: [
        { name: '安徽', id: 1 },
        { name: '澳门', id: 2 }
      ]
    },
    {
      title: 'B',
      list: [
        { name: '北京', id: 3 }
      ]
    },
    {
      title: 'C',
      list: [
        { name: '重庆', id: 4 }
      ]
    },
    {
      title: 'F',
      list: [
        { name: '福建', id: 5 }
      ]
    },
    {
      title: 'G',
      list: [
        { name: '广东', id: 6 },
        { name: '广西', id: 7 },
        { name: '甘肃', id: 8 },
        { name: '贵州', id: 9 }
      ]
    },
    {
      title: 'H',
      list: [
        { name: '湖南', id: 10 },
        { name: '湖北', id: 11 },
        { name: '河南', id: 12 },
        { name: '河北', id: 13 },
        { name: '海南', id: 14 },
        { name: '黑龙江', id: 15 }
      ]
    },
    {
      title: 'J',
      list: [
        { name: '江苏', id: 16 },
        { name: '江西', id: 17 },
        { name: '吉林', id: 18 }
      ]
    },
    {
      title: 'L',
      list: [
        { name: '辽宁', id: 19 },
      ]
    },
    {
      title: 'N',
      list: [
        { name: '内蒙古', id: 20 },
        { name: '宁夏', id: 21 }
      ]
    },
    {
      title: 'Q',
      list: [
        { name: '青海', id: 22 }
      ]
    },
    {
      title: 'S',
      list: [
        { name: '上海', id: 23 },
        { name: '山东', id: 24 },
        { name: '山西', id: 25 },
        { name: '陕西', id: 26 },
        { name: '沈阳', id: 27 },
        { name: '四川', id: 28 }
      ]
    },
    {
      title: 'T',
      list: [
        { name: '天津', id: 29 },
        { name: '台湾', id: 30 }
      ]
    },
    {
      title: 'X',
      list: [
        { name: '新疆', id: 31 },
        { name: '西藏', id: 32 },
        { name: '香港', id: 33 }
      ]
    },
    {
      title: 'Y',
      list: [
        { name: '云南', id: 34 }
      ]
    },
    {
      title: 'Z',
      list: [
        { name: '浙江', id: 35 }
      ]
    }
  ])
  const clickItem = (key: string, item: IndexBarItemType) => console.log(key, item)
  const clickIndex = (key: string) => console.log(key)
</script>

<style lang="less" scoped>
  .demo {
    background: #fff;
  }
</style>
